<template>
    <div id="navel-content">
        <div class="container">
            <Header></Header>
            <Header2></Header2>
            <div class="col-md-9" id="d1">
                <br>
                <el-page-header @back="goBack" content="详情页面">


                </el-page-header>
                <h3>{{current_section_name}}&nbsp;&nbsp;{{title}}</h3>


                <div class="content"><p v-html="content" class="lead">&nbsp;&nbsp;&nbsp;</p></div>

                <nav aria-label="...">
                    <ul class="pager">
                        <li>
                            <button class="btn btn-primary btn-sm" @click="prev_content" :disabled="prev_disabled">上一章
                            </button>
                        </li>
                        &nbsp;&nbsp;&nbsp;
                        <li @click="next_content">
                            <button class="btn btn-primary btn-sm" @click="next_content" :disabled="next_disabled">下一章
                            </button>
                        </li>
                    </ul>
                </nav>
                <hr>
            </div>
            <div class="col-md-3">
                <div class="row">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>
                                推荐榜
                            </span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="get_more_book">更多
                            </el-button>
                        </div>
                        <div v-for="(book_dict, index) in book_list" class="text item text-left">
                            <router-link :to="'/detail/' + book_dict.id + '/'">{{ `${index+1}. `}}{{book_dict.is_free ?
                                book_dict.name :`${book_dict.name} [VIP]`}}
                            </router-link>
                        </div>
                    </el-card>
                </div>
            </div>
            <Footer></Footer>
        </div>
    </div>
</template>

<script>
    import Header2 from "../components/Header2";
    import Header from "../components/Header";
    import Footer from "../components/Footer";

    export default {
        name: "NavelContent",


        data() {
            return {
                // 导航栏
                isCollapse: true,
                book_list: [],
                book_id: 0,
                article_id: 0,


                current_section_name: '',
                title: '',
                content: '',
                current_section: 1,
                total_section: 0,

                next_disabled: false,
                prev_disabled: false,

                token: this.$cookies.get('token'),
                isExpire: this.$cookies.get('user_dict').is_expire,
                is_first: this.$cookies.get('user_dict').is_first,
                is_vip: this.$cookies.get('user_dict').is_vip,
            }
        },
        created() {
            // console.log('$route.path:', this.$route.params);
            // 获取书id和文章id
            this.book_id = this.$route.params.book_id;
            this.current_section = parseInt(this.$route.params.current_section);
            this.get_book_content();
            this.get_hot_order();
        },
        methods: {
            // 获取文章内容
            get_book_content() {
                let headers = {};
                if (this.token) {
                    headers = {
                        'Authorization': `jwt ${this.token}`
                    };
                }

                this.$axios.get(`${this.$settings.base_url}/book/content/`, {
                    params: {
                        book_id: this.book_id,
                        current_section: this.current_section
                    },
                    headers: headers
                }).then(response => {
                    // console.log('get_book_content response.data:', response.data);
                    // 如果用户不是第一次, 并且VIP到期了, 那么才执行
                    let data = response.data.data;
                    if (!data.is_free) {
                        // 用户会员到期并且不是第一次
                        if (this.isExpire && !this.is_first) {
                            this.current_section_name = '';
                            this.title = '对不起, 您的会员已经到期, 只有续费才能继续观看哦!';
                            return
                        }// 用户不是vip
                        else if (!this.is_vip) {
                            this.title = '只有尊贵的VPI用户才能访问哦！';
                            this.current_section_name = '';
                            return
                        }
                    }
                    this.current_section_name = data.current_section_name;
                    this.title = data.title;
                    this.article_id = data.id;
                    this.content = data.content;
                    this.current_section = data.current_section;
                    this.total_section = data.total_section;


                    if (this.token) {
                        let user = this.$cookies.get('user_dict').id;    // 发送历史记录post
                        console.log('user + this.book_id', user, this.book_id, this.article_id);
                        this.$axios.post(`${this.$settings.base_url}/book/historybook/`, {
                            book: this.book_id,
                            article: this.article_id,
                            user: user
                        });
                    }
                });
            },
            // 获取热点排行的数据
            get_hot_order() {
                this.$axios.get(`${this.$settings.base_url}/book/hot/`).then(response => {
                    // console.log('get_hot_order response.data:', response.data);
                    this.book_list = response.data;
                }).catch(error => {

                })
            },
            // 下一章
            next_content() {
                if (this.current_section === this.total_section) {
                    this.next_disabled = true;
                    return
                }

                let headers = {};
                if (this.token) {
                    headers = {
                        'Authorization': `jwt ${this.token}`
                    };
                }

                this.$axios.get(`${this.$settings.base_url}/book/content/`, {
                    params: {
                        book_id: this.book_id,
                        current_section: this.current_section + 1
                    },
                    headers: headers
                }).then(response => {
                    // console.log('response.data.id:', response.data.id);
                    // console.log('next_content response.data', response.data);
                    let data = response.data.data;
                    if (!data.is_free) {
                        // 用户会员到期并且不是第一次
                        if (this.isExpire && !this.is_first) {
                            this.current_section_name = '';
                            this.title = '对不起, 您的会员已经到期, 只有续费才能继续观看哦!';
                            return
                        }// 用户不是vip
                        else if (!this.is_vip) {
                            this.title = '只有尊贵的VPI用户才能访问哦！';
                            this.current_section_name = '';
                            return
                        }
                    }
                    this.current_section_name = data.current_section_name;
                    this.title = data.title;
                    this.content = data.content;
                    this.current_section = data.current_section;
                })
            },
            // 上一页
            prev_content() {
                // console.log('this.current_section:', this.current_section);
                if (this.current_section - 1 <= 0) {
                    this.prev_disabled = true;
                    return
                }

                let headers = {};
                if (this.token) {
                    headers = {
                        'Authorization': `jwt ${this.token}`
                    };
                }

                // console.log('this.current_section:', this.current_section);

                this.$axios.get(`${this.$settings.base_url}/book/content/`, {
                    params: {
                        book_id: this.book_id,
                        current_section: this.current_section - 1
                    },
                    headers: headers
                }).then(response => {
                    // console.log('prev_content response.data', response.data);
                    let data = response.data.data;
                    if (!data.is_free) {
                        // 用户会员到期并且不是第一次
                        if (this.isExpire && !this.is_first) {
                            this.current_section_name = '';
                            this.title = '对不起, 您的会员已经到期, 只有续费才能继续观看哦!';
                            return
                        }// 用户不是vip
                        else if (!this.is_vip) {
                            this.title = '只有尊贵的VPI用户才能访问哦！';
                            this.current_section_name = '';
                            return
                        }
                    }
                    this.current_section_name = data.current_section_name;
                    this.title = data.title;
                    this.content = data.content;
                    this.current_section = data.current_section;
                })
            },

            // 返回书页面
            goBack() {
                this.$router.push(`/detail/${this.book_id}`)
            },
            // 获取更多数
            get_more_book() {
                this.$axios.get(`${this.$settings.base_url}/book/?size=30`).then(response => {
                    // console.log('get_more_book response.data:', response.data);
                    this.book_list = response.data.results;
                    // console.log('this.book_list:', this.book_list);
                })
            }

        },
        components: {
            Header, Header2, Footer
        },
    }

</script>


<style scoped>
    .content p {
        letter-spacing: 1px;
        line-height: 1em;
        text-indent: 2em;
        padding: .2em .3em;
    }

    .el-card { /*调节侧边栏的样式*/
        width: 286px !important;
        padding: 1px;
    }

    。el-card__body {
        width: 100px !important;
    }

    #d1 {
        background-color: rgba(246, 246, 246, 9);
        height: auto;
    }

    .col-md-3 {
        height: 1000px;
    }

    /*卡片*/
    .box-card {
        background-color: rgba(246, 246, 246, 5);
    }

    .text {
        font-size: 14px;
    }

    p {
        text-align: left;
        text-indent: 2em;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }
</style>